<template>
    <!-- 公共表格 -->
    <vxe-table
      v-bind="$attrs"
      v-on="$listeners"
      :align="allAlign"
      border
      resizable
      ref="xTable"
      highlight-current-row
      highlight-current-column
      show-overflow="tooltip"
      round
      sortable
      :header-row-style="headerRowStyle"
      :header-cell-style="headerCellStyle"
    >
      <template v-for="(column,index) in $attrs.columns">
        <!-- 多级表头渲染 -->
        <vxe-table-colgroup v-if="column.children && column.children.length > 0" v-bind="column">
          <childrenTableColumn :columns="column.children"></childrenTableColumn>
        </vxe-table-colgroup>
        <!-- render渲染函数渲染 -->
        <vxe-table-column v-else-if="column.render" v-bind="column">
          <template slot-scope="scope">
            <renderTableColumn :render="column.render" :scope="scope"></renderTableColumn>
          </template>
        </vxe-table-column>
        <!-- slot-scope渲染 -->
        <vxe-table-column v-else-if="column.slotName" v-bind="column">
          <template slot-scope="scope">
            <slotTableColumn :scope="scope" :slot-name="column.slotName"></slotTableColumn>
          </template>
        </vxe-table-column>
        <!-- 普通遍历 -->
        <vxe-table-column v-else v-bind="column"></vxe-table-column>
      </template>
      <template #empty>
        <slot name="empty"></slot>
      </template>
    </vxe-table>
  </div>
</template>
<script>
import childrenTableColumn from "./children-table-column.js";
import renderTableColumn from "./render-table-column.js";
import slotTableColumn from "./slot-table-column.js";

export default {
  name: "render-table",
  components: {
    renderTableColumn,
    slotTableColumn,
    childrenTableColumn,
  },
  provide() {
    return {
      tableRoot: this,
    };
  },
  props: {},
  data() {
    return {};
  },
  methods: {
    // 渲染表格样式
    headerCellStyle() {
      return {
        // background: "#ECF3FF",
        color: "#333",
        fontWeight: "bold",
      };
    },
    headerRowStyle() {
      return {
        background: "#ECF3FF",
      };
    },
  },
};
</script>

<style scoped lang='scss'>
</style>